<template>
  <div class="min-h-screen flex flex-col justify-center items-center bg-black p-10 text-4xl">
    <!-- 背景图片 -->
    <img src="../../public/images/home-bg.png" alt="bg-image" class="w-screen fixed top-0 left-0 z-0 object-cover" />
    <div class="w-full max-w-5xl mx-auto bg-opacity-80 bg-black rounded-2xl shadow-2xl overflow-hidden relative text-white">
      <div class="px-10 py-12">
        <div class="flex items-start justify-between">
          <div class="w-2/3 flex items-center">
            <img :src="userInfo.image" alt="用户头像" class="w-64 h-64 object-cover rounded-full mr-4" v-if="userInfo.image" />
            <div class="w-1/2">
              <h1 class="text-5xl text-white font-bold mb-4">{{ userInfo.username }}</h1>
              <p class="text-gray-400 mb-6">{{ userInfo.role }}</p>
              <p class="text-gray-400">{{ userInfo.email }}</p>
            </div>
          </div>
          <!-- 返回首页按钮 -->
          <button class="bg-amber-500 text-white top-0 right-0 px-6 py-3 rounded-lg hover:bg-amber-600 focus:outline-none" @click="goToHome">
            <span>返回首页</span>
          </button>
        </div>
        <!-- 绑定手机号部分 -->
        <div class="mt-8">
          <h2 class="text-3xl font-semibold mb-2">绑定手机号</h2>
          <input type="tel" v-model="phoneNumber" placeholder="请输入手机号" class="w-full p-3 border rounded-lg border-gray-300 focus:border-gold-500" />
          <button class="mt-4 bg-amber-500 text-white px-8 py-4 rounded-full hover:bg-amber-600 focus:outline-none" @click="bindPhoneNumber">绑定</button>
          <p class="mt-2 text-gray-400" v-if="phoneBindStatus === 'pending'">正在绑定，请稍候...</p>
          <p class="mt-2 text-green-500" v-if="phoneBindStatus === 'success'">手机号已绑定</p>
          <p class="mt-2 text-red-500" v-if="phoneBindStatus === 'error'">{{ phoneBindError }}</p>
        </div>
        <!-- 浏览历史部分 -->
        <div class="mt-12">
          <h2 class="text-4xl font-semibold mb-4">浏览历史</h2>
          <ul class="space-y-4">
            <li v-for="(history, index) in browsingHistory" :key="index" class="flex items-center justify-between p-4 bg-black-50 rounded-lg">
              <div class="w-3/4">
                <p class="text-gray-400">{{ history.title }}</p>
                <p class="text-gray-400 text-3xl">{{ history.date }}</p>
              </div>
              <button class="bg-red-500 text-white px-6 py-3 rounded-full hover:bg-red-600 focus:outline-none" @click="removeHistory(index)">删除</button>
            </li>
          </ul>
        </div>

        <!-- 设置下拉菜单 -->
        <div class="mt-6 flex justify-end h-10 p-0">
          <button class="bg-gray-200 text-gray-700 px-4 rounded-lg hover:bg-gray-300 focus:outline-none" @click="toggleSettingsMenu">
            <span class="text-3xl">设置</span>
            <svg v-if="isSettingsMenuOpen" class="ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
            <svg v-else class="ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"></svg>
          </button>

          <div v-if="isSettingsMenuOpen" class="absolute right-0 top-100 bg-white rounded-lg shadow-lg p-4 w-200" style="z-index: 1000;">
            <ul>
              <li class="mb-4">
                <a href="#" class="block p-3 text-gray-700 hover:bg-gray-100 rounded-lg" @click.prevent="goToProfileSettings">个人资料设置</a>
              </li>
              <li class="mb-4">
                <a href="#" class="block p-3 text-gray-700 hover:bg-gray-100 rounded-lg" @click.prevent="goToPasswordSettings">密码设置</a>
              </li>
              <li class="mb-4">
                <a href="#" class="block p-3 text-gray-700 hover:bg-gray-100 rounded-lg" @click.prevent="logout">退出登录</a>
              </li>
            </ul>
          </div>
        </div>
        <!-- 返回顶部按钮 -->
        <div class="mt-12 mb-20 text-left">
          <button class="bg-amber-500 text-white px-8 py-4 rounded-full hover:bg-amber-600 focus:outline-none" @click="scrollToTop">
            返回顶部
          </button>
        </div>
      </div>
    </div>
    <!-- 底部版权信息区 -->
    <footer class="bg-none p-4 text-white text-4xl mt-12 text-center relative">
      &copy; {{ currentYear }} 线上博物馆项目组. 保留所有权利。
    </footer>
  </div>
</template>

<script setup lang="ts">
import {inject, ref} from 'vue';
import { useRouter } from 'vue-router';

const userInfo = inject('userInfo'); // 获取用户信息
const currentYear = ref(new Date().getFullYear());

const phoneNumber = ref('');
const phoneBindStatus = ref('');
const phoneBindError = ref('');
const isSettingsMenuOpen = ref(false);

// 获取路由实例
const router = useRouter();

const bindPhoneNumber = () => {
  // 这里的逻辑应该是发送请求到后端来绑定手机号
  // 为了简化，我们直接模拟一个成功绑定
  phoneBindStatus.value = 'pending';
  setTimeout(() => {
    phoneBindStatus.value = 'success';
    // 如果绑定失败，可以设置为 'error' 并设置 phoneBindError 的内容
    // phoneBindStatus.value = 'error';
    // phoneBindError.value = '绑定失败，请重试。';
  }, 2000);
};

const toggleSettingsMenu = () => {
  isSettingsMenuOpen.value =!isSettingsMenuOpen.value;
};

const goToProfileSettings = () => {
  // 跳转到个人资料设置页面
  console.log('跳转到个人资料设置页面');
  // 你可以使用 vue-router 或其他方法来实现页面跳转
  isSettingsMenuOpen.value = false;
};

const goToPasswordSettings = () => {
  // 跳转到密码设置页面
  console.log('跳转到密码设置页面');
  // 你可以使用 vue-router 或其他方法来实现页面跳转
  isSettingsMenuOpen.value = false;
};

const logout = () => {
  // 退出登录的逻辑
  console.log('用户已退出登录');
  // 你可以清除用户信息、重定向到登录页面等
  isSettingsMenuOpen.value = false;
};

const browsingHistory = ref([
  { title: '青铜鼎展览', date: '2024-05-01' },
  { title: '陶瓷花瓶鉴赏', date: '2024-05-03' },
  { title: '书画作品浏览', date: '2024-05-05' },
  { title: '古代玉器研究', date: '2024-05-07' },
  //...更多浏览历史
]);

const removeHistory = (index: number) => {
  browsingHistory.value.splice(index, 1);
};

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  });
};

// 新增，返回首页按钮点击事件处理函数
const goToHome = () => {
  router.push('/users/home');
};

</script>

<style scoped>
/* 你可以在这里添加自定义样式来覆盖 Tailwind CSS 的默认样式 */
</style>